<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
    <p>微任务比宏任务执行的更早</p>
    <div id="container"></div>
    <script>
        const $p1 = $('<p>一段文字</p>');
        const $p2 = $('<p>一段文字</p>');
        const $p3 = $('<p>一段文字</p>');
        $('#container').append($p1).append($p2).append($p3);
        // console.log('length', $('#container').children().length); //3 
        // alert('本次callback结束，DOM结构已更新，但未触发渲染');
        // alert 会阻断js执行，也会阻断DOM渲染，便于查看效果

        // 微任务：DOM渲染前触发
        Promise.resolve().then(() => {
            console.log('length1', $('#container').children().length); //3 
            alert('Promise then') //DOM 渲染了吗？——没有
        })
        // 宏任务：DOM渲染后触发
        setTimeout(() => {
            console.log('length2', $('#container').children().length); //3 
            alert('settimeout then') //DOM 渲染了吗？——有
        });
    </script>
</body>

</html>